<template>
	<view style="height: 100%;">
		<view class="tabbar">
			<view class="tabbar-item" @click="chooseItem(0)" :class="{active : index == 0}">
				<view style="display: flex; padding-top: 10px; padding-bottom: 10px; justify-content: center;">全部</view>
				<view v-if="index == 0" class="line"></view>
			</view>
			<view class="tabbar-item" @click="chooseItem(1)" :class="{active : index == 1}">
				<view style="display: flex; padding-top: 10px; padding-bottom: 10px; justify-content: center;">已支付</view>
				<view v-if="index == 1" class="line"></view>
			</view>
			<view class="tabbar-item" @click="chooseItem(2)" :class="{active : index == 2}">
				<view style="display: flex; padding-top: 10px; padding-bottom: 10px; justify-content: center;">配送中</view>
				<view v-if="index == 2" class="line"></view>
			</view>
			<view class="tabbar-item" @click="chooseItem(3)" :class="{active : index == 3}">
				<view style="display: flex; padding-top: 10px; padding-bottom: 10px; justify-content: center;">待评价</view>
				<view v-if="index == 3" class="line"></view>
			</view>
		</view>
		
		<view v-if="orderList.length != 0">
			<view v-for="(item, index) in orderList">
				<view class="shop-layout" @click="gotoOrderDetailPage(item.id)">
					<view v-for="(goods, i) in item.goodsDetailList">
						<view class="card">
							<image class="card-pic" :src="goods.picUrl"></image>
							<view class="card-content">
								<view class="card-content-title">{{goods.name}}</view>
								<view class="card-content-count">x {{goods.count}}</view>
							</view>
							<view class="card-content-price">¥ {{numFilter(goods.price)}}</view>
						</view>
						<view class="gray-line"></view>
					</view>
					<view class="desc-layout">共计{{item.count}}件商品, 实付: ¥{{numFilter(item.actualMoney)}}</view>
				</view>
			</view>
			<view v-if="reachBottom" style="text-align: center; color: rgb(100, 100, 100); font-size: 16px; height: 40px; margin-top: 20px;">
				---已到底---
			</view>
		</view>
		
		<view v-if="orderList.length == 0" style="text-align: center; color: rgb(100, 100, 100); font-size: 16px; margin-top: 20px;">
			未查询到订单
		</view>
	</view>
</template>

<script>
	import { http } from '@/common/service/service.js'
	
	export default {
		data() {
			return {
				index: 0,
				orderList:[],
				pageNumMap: new Map([[0, 1], [1, 1], [2, 1], [3, 1]]),
				pageSize: 10,
				reachBottom: false,
			}
		},
		methods: {
			chooseItem(item) {
				this.index = item
				this.orderList.splice(0)
				this.getOrderList(this.index - 1)
			},
			
			async getOrderList(type) {
				var pageNum = this.pageNumMap.get(this.index);
				uni.showLoading({
					title: '加载中'
				});
				var res = await new Promise((resolve, reject) => {
					http.get('/order/list?type=' + type + '&pageNum=' + pageNum + '&pageSize=' + this.pageSize).then(res => {
						resolve(res.data);
					})
				});
				if (res.code == 200) {
					uni.hideLoading();
					this.reachBottom = false;
					var list = res.data;
					if (list.length == 0 && pageNum > 1) {
						this.pageNumMap.set(this.index, pageNum - 1);
						this.reachBottom = true;
					}
					for (var index in list) {
						var item = list[index];
						var goodsDetails = item.goodsDetailList;
						var count = 0;
						for (var j in goodsDetails) {
							var goods = goodsDetails[j];
							count += goods.count;
						}
						item.count = count;
						this.orderList.push(item);
					}
				}
			},
			
			numFilter(value) {
			    let realVal = parseFloat(value).toFixed(2)
			    return realVal
			},
			
			gotoOrderDetailPage(id) {
				uni.navigateTo({
					url: '/pages/weapp/order/orderdetail?id=' + id
				})
			},
		},
		
		onShow() {
			this.getOrderList(-1);
		},
		
		onReachBottom() {
			var pageNum = this.pageNumMap.get(this.index);
			this.pageNumMap.set(this.index, pageNum + 1);
			this.getOrderList(this.index - 1);
		}
	}
</script>

<style>
	.tabbar {
		display: flex;
		flex-direction: row;
	}
	.tabbar-item {
		display: flex;
		flex-direction: column;
		width: 25%;
		text-align: center;
		color: rgb(100, 100, 100);
		background-color: white;
		justify-content: center;
	}
	.active {
		color: black;
	}
	.line {
		display: flex;
		width: 50px;
		height: 2px;
		background-color: red;
		text-align: center;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}
	.gray-line {
		display: flex;
		margin-left: 10px;
		margin-right: 10px;
		height: 1px;
		background-color: gainsboro;
	}
	.shop-layout {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.card {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 10px 10px;
	}
	.card-pic {
		display: flex;
		width: 100px;
		height: 100px;
		margin: 10px 10px;
	}
	.card-content {
		display: flex;
		flex-direction: column;
		height: 100px;
		margin: 10px 10px;
		width: 45%;
	}
	.card-content-title {
		font-size: 14px;
		font-weight: bold;
		text-align: left;
	}
	.card-content-count {
		font-size: 14px;
		text-align: left;
		margin-top: auto;
		margin-bottom: 0;
	}
	.card-content-price {
		display: flex;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		margin-top: auto;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.desc-layout {
		display: flex;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: 10px;
		font-size: 14px;
	}
</style>